import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {Modal,Tabs,Card,Row,Col,Menu,Pagination,Icon,Checkbox,Popconfirm, Input,Radio,Spin,Button,Upload,message} from 'antd';
import RightContent from '../GlobalHeader/RightContent';
import moment from 'moment';
import { setParam } from '@/utils/Base';
class FileManager extends PureComponent {
    state = {
        visible:false,//模态框是否关闭

    };
    /**
     * 前置方法
     */
    componentDidMount = ()=>{
        
        
    }
    
    render(){
        // console.log('this.props',this.props.FileList);
        const that = this;
        return(
            <>
                <Modal
            width="70%"
            height={700}
            visible={this.props.FileManagerVisible}
            onOk={this.props.FileManagerOkHandle}
            onCancel={this.props.FileManagerhandleModalVisible}
            >
            <Spin spinning={this.props.modalLoading}>
            <Tabs defaultActiveKey="fileList">
                <Tabs.TabPane tab="文件管理器" key="fileList">
                    <Row>
                        <Col span={24}>
                            
                        <Upload
                            accept="image/*"
                            action="/server/api/admin/v1/adminFile/uploadFileJson"
                            name="upfile"
                            showUploadList={false}
                            data={setParam()}
                            // customRequest={this.uploadHandler}
                            onChange={(info)=>{
                                that.props.onFileUpload(info);
                            }}
                            >
                            {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
                            <Button type="button" className="control-item button upload-button" data-title="插入图片">
                                <Icon type="picture" theme="filled" />
                                添加图片
                            </Button>
                        </Upload>
                        </Col>
                        <Col span={24}>
                            <Row>
                                <Col span={4}>
                                    <Menu
                                    defaultSelectedKeys={['1']}
                                    >
                                        <Menu.Item key={1}>菜单项1</Menu.Item>
                                        <Menu.Item key={2}>菜单项2</Menu.Item>
                                        <Menu.Item key={3}>菜单项3</Menu.Item>
                                    </Menu>
                                </Col>
                                <Col span={20}>
                                <div style={{ background: '#ECECEC', padding: '30px' }}>
                                    <Row gutter={16}>
                                        {that.props.FileList.list.map(function(item,key){
                                            return (
                                                <Col span={8} key={key}>
                                                    <Card 
                                                    key={`delete${item.id}`}
                                                    hoverable={true}//鼠标经过是否浮动
                                                    cover={<div style={{height:200,overflow:'hidden'}}><img alt="example" width="100%" src={item.cover} /></div>}
                                                    bordered={true}//是否有边框
                                                    actions={[
                                                    <Popconfirm
                                                    placement="bottom"
                                                        icon={<Icon type="edit" />}
                                                        title={[
                                                            '修改名称',
                                                            <Input placeholder="input with clear icon" key={`editName${item.id}`} value={item.name}/>
                                                        ]}
                                                        onConfirm={(e)=>{
                                                            that.props.editFileName(item.id);
                                                        }}
                                                        okText="保存"
                                                        cancelText="取消"
                                                    >
                                                        <Icon type="edit" />
                                                    </Popconfirm>, 
                                                    <Popconfirm
                                                    placement="bottom"
                                                    icon={<Icon type="link" />}
                                                    title={[
                                                        '复制链接',
                                                        <Input placeholder="input with clear icon" key={`copyLink${item.id}`} disabled value={item.cover} />
                                                    ]}
                                                    onConfirm={(e)=>{
                                                        that.props.copyFileLink(item.cover);
                                                    }}
                                                    okText="复制"
                                                    cancelText="取消"
                                                    >
                                                    <Icon type="link" />
                                                    </Popconfirm>, 
                                                    <Popconfirm
                                                        placement="bottom"
                                                        icon={<Icon type="snippets" />}
                                                        title={[
                                                            '修改分组',
                                                            <Radio.Group key={`editGroup${item.id}`}
                                                            onChange={(e)=>{
                                                                console.log(e);
                                                            }} 
                                                            value={1}
                                                            style={{width:'100%'}}
                                                            >
                                                                <Radio style={{
                                                                    display: 'block',
                                                                    height: '30px',
                                                                    lineHeight: '30px',
                                                                    }} 
                                                                    value={1}>
                                                                    Option A
                                                                </Radio>
                                                                <Radio style={{
                                                                    display: 'block',
                                                                    height: '30px',
                                                                    lineHeight: '30px',
                                                                    }} 
                                                                    value={2}>
                                                                    Option B
                                                                </Radio>
                                                                <Radio style={{
                                                                    display: 'block',
                                                                    height: '30px',
                                                                    lineHeight: '30px',
                                                                    }} 
                                                                    value={3}>
                                                                    Option C
                                                                </Radio>
                                                                <Radio style={{
                                                                    display: 'block',
                                                                    height: '30px',
                                                                    lineHeight: '30px',
                                                                    }} 
                                                                    value={4}>
                                                                    Option D
                                                                </Radio>
                                                            </Radio.Group>
                                                        ]}
                                                        onConfirm={(e)=>{
                                                            that.props.editFileGroup(item.id);
                                                        }}
                                                        okText="确定"
                                                        cancelText="取消"
                                                    >
                                                    <Icon type="snippets" />
                                                    </Popconfirm>,
                                                    <Popconfirm
                                                        placement="bottom"
                                                        icon={<Icon type="snippets" />}
                                                        title={[
                                                            '确定删除该图片？',<br key={`delete${item.id}`} />,'若删除对现有业务可能会造成影响']}
                                                        // okText={[
                                                        //     <Button type="primary" key={`deletes${item.id}`} size="small" loading={that.props.FileManager.removeButtonLoading}>确定</Button>
                                                        // ]}
                                                        cancelText="取消"
                                                        onConfirm={(e)=>{
                                                            that.props.deleteFile(item.id);
                                                        }}
                                                        >
                                                        <a><Icon type="delete" /></a>
                                                    </Popconfirm>
                                                    ]}
                                                    >
                                                    <Card.Meta title={[<Checkbox defaultChecked={false} checked2={that.props.FileManager.onChange.includes(item.cover)} key={`meta${item.id}`} onChange={(status)=>{
                                                        that.props.cardOnClick(status.target.checked,item.cover);
                                                    }}>{item.name}</Checkbox>]} 
                                                    description={[moment(item.upload_time*1000).format('YYYY-MM-DD HH:mm'),`上传`]}
                                                    />
                                                    </Card>
                                                </Col>
                                            )
                                        })}
                                    </Row>
                                    
                                </div>
                                <Pagination total={that.props.FileList.count} pageSize={this.props.FileList.pageSize} current={this.props.FileList.current} onChange={this.props.onPageChange} pageSize={6} style={{float:"right",marginTop:"1rem"}} />
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    
                </Tabs.TabPane>
                <Tabs.TabPane tab="提取网络附件" key="getInterFile">
                    <Card>
                        <p>
                            提取网路图片
                        </p>
                    </Card>
                </Tabs.TabPane>
            </Tabs>
            </Spin>
            </Modal>
            </>
        )
    }
}

export default FileManager;